<!-- 交易明细 -->
<template>
  <view class="container">
    <view class="dropdown">
			<u-dropdown>
        <u-dropdown-item v-model="coin" title="币种" :options="coinList"></u-dropdown-item>
				<u-dropdown-item v-model="market" title="限价委托" :options="marketList"></u-dropdown-item>
				<u-dropdown-item v-model="model" title="全仓" :options="modelList"></u-dropdown-item>
				<u-dropdown-item v-model="status" title="全部状态" :options="statusList"></u-dropdown-item>
				
			</u-dropdown>
		</view>

    <view class="list">
      <view class="item" v-for="i in 10">
        <view class="t flex">
          <view class="title">
            <text>ETH 永续/USDT·全仓 </text>
            <text>20X·开空</text>
          </view>
          
          <text>已成交</text>
        </view>
        <view class="c ">
          <view class="tab flex-c">
            <text class="title">委托量(ETH)</text>
            <text class="num">0.09</text>
          </view>
          <view class="tab flex-c">
            <text class="title">委托价(USDT)</text>
            <text class="num">3110.41</text>
            
          </view>
          <view class="tab flex-c">
             <text class="title">收益(USDT)</text>
            <text class="num">0.0001</text>
          </view>
        </view>
        <view class="c ">
          <view class="tab flex-c">
            <text class="title">成交量(ETH)</text>
            <text class="num">0.09</text>
          
          </view>
          <view class="tab flex-c">
            <text class="title">成交均价(USDT)</text>
            <text class="num">3110.41</text>
            
          </view>
          <view class="tab flex-c">
             <text class="title">手续费(USDT)</text>
            <text class="num">0.0001</text>
          </view>
        </view>
        <view class="b flex">
      
            <view class="btn flex">
              下单时间：2021-03-23
            </view>
  
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data () {
    return {
      // dropdown
				market: 1,
				model: 1,
				coin: 1,
        status:1,
				marketList: [{
						label: "限价委托",
						value: 1,
					},
					{
						label: "限价委托2",
						value: 2,
					},
					{
						label: "限价委托3",
						value: 3,
					},
				],
				modelList: [{
						label: "全仓",
						value: 1,
					},
					{
						label: "半仓",
						value: 2,
					},
				],
				coinList: [{
						label: "BTC1S/USDT",
						value: 1,
					},
					{
						label: "BTC/USDT",
						value: 2,
					},
				],
        statusList:[
          {
						label: "开空",
						value: 1,
					},
					{
						label: "开多",
						value: 2,
					},
        ]
    };
  },

  components: {},

  computed:{

	},

  mounted() {},

  methods: {}
}

</script>
<style lang='scss' scoped>
.container {
min-height: 100vh;
  background-color: $b;
  padding: 0;
  .dropdown{
    background-color: #fff;
    margin-bottom: 20rpx;
  }
}
.list {
      display: flex;
      flex-direction: column;
      .item{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 20rpx;
        width: 750rpx;
        height: 320rpx;
        background: #FFFFFF;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        .t{
          text {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #1488FF
          }
          .title{
            text:nth-child(1) {
              font-size: 32rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #333333;
            }
            text:nth-child(2){
              margin-left: 20rpx;
              font-size: 32rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #FE5021;
            }
          }
        }
        .c {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .tab {
            min-width: 200rpx;
            .num {
              font-size: 36rpx;
              font-family: DINPro;
              font-weight: bold;
              color: #333333;
            }
            .title {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #666666;
            }
          }
        }
        .b {
          margin-top: 20rpx;
          .btn{
            width: 310rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
  
</style>